<template>
  <div id="app">
    <h2>module中的内容</h2>
    <h2>{{$store.state.a.name}}</h2>
    <button @click="updateName">修改名字</button>
    <h2>{{$store.getters.changeName}}</h2>
    <h2>{{$store.getters.changeName2}}</h2>
    <h2>{{$store.getters.changeName3}}</h2>
    <button @click="asyncUpdateName">按钮异步修改</button>

    <h2>{{message}}</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <button @click="addStudent">添加学生</button>
    <vue-hellovuex></vue-hellovuex>

    <h2>{{$store.getters.powerCounter}}</h2>
    <!-- <h2>{{more20stu}}</h2> -->
    <h2>{{$store.getters.more20Stu}}</h2>
    <h2>{{$store.getters.more20StuLength}}</h2>
    <h2>{{$store.getters.moreAgeStu(11)}}</h2>

    <h2>{{$store.state.info}}</h2>
    <button @click="updateInfo">修改信息</button>
  </div>
</template>

<script>
import VueHellovuex from './components/HelloVuex.vue'

import {
  INCREMENT
} from './store/mutation-types'

export default {
  name: 'App',
  components: {
    VueHellovuex
  },
  data() {
    return {
      message: 'hello',
      // counter: 0
    }
  },
  // computed: {
  //   more20stu() {
  //     return this.$store.state.students.filter(s => {
  //       return s.age >= 11
  //     })
  //   }
  // },
  methods: {
    addition() {
      this.$store.commit(INCREMENT)
    },
    subtraction() {
      this.$store.commit('decrement')
    },
    addCount(count) {
      //普通提交风格
      //this.$store.commit('incrementCount', count)

      //特殊提交风格
      //可以理解incrementCount为一个事件类型
      this.$store.commit({
        type: 'incrementCount',
        count: count
      })
    },
    addStudent() {
      const stu = {id: 104, name: '拉克丝', age: 20}
      this.$store.commit('addStudent', stu)
    },
    updateInfo() {
      // this.$store.commit('updateInfo')
      //为了让经过actions 注释掉上面的
      this.$store.dispatch('actUpdateInfo', '我是携带的信息').then(res => {
        console.log(res);
      })
    },
    updateName() {
      this.$store.commit('updateName', 'leon3')
    },
    asyncUpdateName() {
      this.$store.dispatch('lastUpdateName')
    }
    
  }
}
</script>

<style>

</style>
